<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                职位列表
            </header>
            <div class="panel-body">
                <div class="row" >
                    <div class="col-lg-6 col-md-12">
                        <div class="form-horizontal form form-group">
                            <label class="control-label col-lg-2">所属部门</label>
                            <div class="col-lg-5">
                                <select id="SearchDepartmentID" class="form-control m-bot15">
                                    <option value='0'>全部</option>
                                    <?php
                                        foreach($DepartmentData as $Key=>$Val){
                                            $tID = $Val['ID'];
                                            $tName = $Val['Name'];
                                            echo "<option value='$tID'>$tName</option>";
                                        }
                                    ?>
                                </select>
                            </div>
                        </div>


                    </div>
                    <div class="col-lg-6 col-md-12" style="text-align: right">
                        <button id="Add" class="btn btn-danger"><i class=" icon-plus"></i> 新建职位</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <table id="DataList" lay-filter="DataList" class="table"></table>
                        <script type="text/html" id="HeadToolBar">
                            <div class="layui-btn-container">

                            </div>
                        </script>

                        <script type="text/html" id="ToolBar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</i> </a>
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</i> </a>
                        </script>
                    </div>
                </div>


            </div>
        </section>

    </div>
</div>
<!-- 添加部门对话框 -->
<div id="AddDialog" style="display: none">
    <form class="form-horizontal" role="form">
        <div class="row" style="margin: 15px 15px;">
            <div class="form-group ">
                <label id="DepartmentLab" class="col-md-3 control-label">上级部门</label>
                <div class="col-md-9">
                    <select id="DepartmentID" class="form-control m-bot15">
                        <?php
                            foreach($DepartmentData as $Key => $Val){
                                $tID = $Val['ID'];
                                $tName = $Val['Name'];
                                echo "<option value='$tID'>$tName</option>";
                            }
                        ?>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label id="NameLab" class="col-md-3 control-label">部门名称</label>
                <div class="col-md-9">
                    <input id="Name" type="text" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label id="DescLab" class="col-md-3 control-label">部门描述</label>
                <div class="col-md-9">
                    <textarea id="Desc" class="form-control " name="comment" required></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table,
            layer = layui.layer,
            $ = layui.$;

        //职位数据表初始化
        var tableIns = table.render({
            elem: '#DataList'
            , height: '690'
            , url: '/index.php/user/Department/mb_PostListing' //数据接口
            , toolbar: '#HeadToolBar' //开启头部工具栏，并为其绑定左侧模板
            , page: {
                theme: '#ff6c60'
            }
            , where : {
                DepartmentID:$('#SearchDepartmentID').val()
            }
            , limit: 100
            , limits: [100, 200, 300, 400, 500]
            , cols: [[ //表头 總寬度1670
                {type: 'checkbox', fixed: 'left'}
                , {field: 'Name', title: '职位', width: 150}
                , {field: 'DepartmentName', title: '所属部门', width: 250}
                , {field: 'Describe', title:'职位描述', }
                , {title: '操作', width: 115, align: 'center', toolbar: '#ToolBar'}
            ]]
        });

        //所属部门选择按下
        $('#SearchDepartmentID').bind('change', function () {
            // tableIns.reload();
            table.reload('DataList', {
                where: {
                    DepartmentID: $('#SearchDepartmentID').val()
                }
            });
        });

        //新增职位按钮按下
        $('#Add').bind('click',function () {
            mb_ShowPostDialog($, layer, tableIns, 0);
        });

        //监听职位数据表行工具事件
        table.on('tool(DataList)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


            if(layEvent === 'edit'){
                //编辑职位
                mb_ShowPostDialog($, layer, tableIns, data.ID, data);
            } else if(layEvent === 'del'){
                //删除职位
                global.post('/index.php/user/Department/mb_DeletePost', {
                    ID:data.ID
                }, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        layer.msg(msg['msg'], {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            obj.del();
                        });
                        return false;
                    } else {
                        mb_OnMessage(msg);
                        return false;
                    }
                });
            }
        });
    });

    //显示职位对话框
    function mb_ShowPostDialog($, layer, tableIns, PostID, PostData=null) {
        var dialogWidth = '650px';
        if (document.documentElement.scrollWidth < 500) {
            //手機版
            dialogWidth = '350px';
        }
        $('#DepartmentLab').html('所属部门');
        $('#NameLab').html('职位名称');
        $('#DescLab').html('职位描述');

        if(PostID == 0){
            $('#Name').val('')
            $('#Desc').val('')
        } else {
            $('#Name').val(PostData.Name);
            $('#Desc').val(PostData.Describe);
        }

        layer.open({
            type: 1,
            title: '添加职位',
            area: [dialogWidth, '350px'],
            content: $('#AddDialog'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['保存', '取消'],
            yes: function (index, layero) {
                var DepartmentID = $('#DepartmentID').val();
                var PostName = $('#Name').val();
                var PostDesc = $('#Desc').val();
                if (PostName == '') {
                    layer.msg('请输入职位名称', {icon: 2});
                    return false;
                }

                var Params = {};
                var Url = '';
                if(PostID == 0){
                    //新增职位
                    Params = {
                        DepartmentID: DepartmentID,
                        PID: 0,
                        Name: PostName,
                        Describe: PostDesc
                    };
                    Url = '/index.php/user/Event/mb_Add';
                } else {
                    //编辑职位
                    Params = {
                        ID: PostID,
                        DepartmentID: DepartmentID,
                        PID: 0,
                        Name: PostName,
                        Describe: PostDesc
                    };
                    Url = '/index.php/user/Event/mb_Edit';
                }
                var fields = {
                    Type: 'Post',
                    Params: JSON.stringify(Params)
                };
                global.post(Url, fields, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        layer.msg(msg['msg'], {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            tableIns.reload();
                            layer.close(index);
                        });
                        return false;
                    } else {
                        mb_OnMessage(msg);
                        return false;
                    }
                });
            },
            btn2: function (index, layer0) {
                console.log('取消按下');
            }
        });
    }

</script>